<template>
  <div class="login">
    <h2>员工防伪验证</h2>
    <form action="">
      <div class="input">
        <input type="text" placeholder="请输入手机号码" v-model="userPhoto" />
      </div>

      <div class="input2">
        <input
          type="text "
          placeholder="请输入验证码"
          v-model="phoneCode"
          @input="doubledFn"
        />
        <span @click="codeClickFn" class="spIn cursor">{{
          countDownShow ? "获取验证码" : `${newCount}秒后重发`
        }}</span>
      </div>
      <div style="font-size: 10px" v-show="!countDownShow">
        短信验证码已发送，可能会有延后，请耐心等待
      </div>
    </form>
    <button
      @click="phoneCodeFn"
      :disabled="!btnAddUser"
      class="cursor"
      :style="{ backgroundColor: btnAddUser ? '#88b6f2' : '#c9e0f1' }"
    >
      确定
    </button>
  </div>
</template>
<script setup>
import { onMounted, ref, computed } from "vue";
import request from "@/api/request.js";
import { useRouter } from "vue-router";
const router = useRouter();
const userPhoto = ref(""); //手机号
const phoneCode = ref(""); //验证码
const countDownShow = ref(true); //倒计时
const btnAddUser = ref(false);
const countDown = ref(30);
const newCount = computed(() => {
  if (countDown.value < 0) {
    clearInterval(timeId.value);
    countDownShow.value = true;
    countDown.value = 30;
  }
  return countDown.value;
});

let timeId = ref();
const time = () => {
  timeId.value = setInterval(() => {
    countDown.value--;
  }, 999.9);
};
//提交按钮
const doubledFn = () => {
  if (
    phoneCode.value.length > 4 &&
    userPhoto.value != "" &&
    phoneRegex.test(userPhoto.value)
  ) {
    btnAddUser.value = true;
  } else {
    btnAddUser.value = false;
  }

  if (phoneCode.value.length > 4 && userPhoto.value != "") {
    btnAddUser.value = true;
  } else {
    btnAddUser.value = false;
  }
};

// 验证手机号
let phoneRegex =
  /^(?:(?:\+|00)86)?1(?:(?:3[\d])|(?:4[5-79])|(?:5[0-35-9])|(?:6[5-7])|(?:7[0-8])|(?:8[\d])|(?:9[1589]))\d{8}$/;
const setTim = ref(0);
const userPhotoFn = () => {
  if (!setTim.value) {
    setTim.value = setTimeout(() => {
      if (userPhoto.value != "") {
        if (!phoneRegex.test(userPhoto.value)) {
          ElMessage({
            message: "请输入正确的手机号",
            type: "warning",
            plain: true,
          });
        }
      } else {
        ElMessage({
          message: "请输入手机号",
          type: "warning",
          plain: true,
        });
      }
    }, 400);
  } else {
    clearTimeout(setTim.value);
    setTim.value = 0;
  }
};
// 发送短信
const codeClickFn = async () => {
  userPhotoFn();
  if (phoneRegex.test(userPhoto.value)) {
    const codePh = await request.get(
      `api/index/GwCode?phone=${userPhoto.value}`
    );
    if (codePh.code == 1) {
      countDownShow.value = false;
      time();
      ElMessage({
        message: "短信发送成功",
        type: "success",
        plain: true,
      });
    }
  }
};
// 注册
const showlogin = ref(false);
const codeFn = async () => {
  if (phoneCode.value !== "") {
    const res = await request.post("api/index/GwPhone", {
      phone: userPhoto.value,
      code: phoneCode.value,
    });
    if (res.code == 1) {
      ElMessage({
        message: "验证成功",
        type: "success",
        grouping: true,
        plain: true,
      });
      showlogin.value = true;
      emit("fangweiFn", {
        showlogin: showlogin.value,
        userPhoto: userPhoto.value,
      });
      userPhoto.value = "";
      phoneCode.value = "";
    } else {
      ElMessage({
        message: res.msg,
        type: "error",
        grouping: true,
        plain: true,
      });
      showlogin.value = false;
      return;
    }
  } else {
    phoneCode.value
      ? false
      : ElMessage({
          message: "请输入验证码",
          type: "warning",
          plain: true,
        });
    return;
  }
};
const emit = defineEmits();
// 点击注册或登录
const phoneCodeFn = async () => {
  codeFn();
};
</script>
<style scoped lang="scss">
@import "@/assets/base.scss";

// @media screen and (max-width: 1000px) {
//   .login {
//     width: 37.7vw !important;
//     height: 36vw !important;
//   }
// }

.login {
  position: absolute;
  right: 0;
  min-width: 220px;
  min-height: 240px;
  width: 17.7vw;
  height: 16vw;
  background-color: rgba($color: #fff, $alpha: 0.2);
  border-radius: 0.4vw;
  padding: 1vw;
  padding-top: 0.6vw;
  font-size: $title-font-size7;
  color: #969a9b;
  margin-right: 12vw;

  h2 {
    text-align: center;
    font-size: 1.3vw;
    color: $firm-color;
    font-weight: 700;
    margin-bottom: 0.4vw;
  }

  p {
    font-size: $title-font-size7;
    margin-top: 7px;
    margin-bottom: 24px;

    span {
      color: #049ddf;
    }
  }

  .input2 {
    width: 100%;
    margin-top: 1.5vw;
    position: relative;
    display: flex;
    align-items: center;
    border-radius: 0.5vw;

    input {
      border-radius: 0.5vw 0 0 0.5vw;
      width: 100%;
      flex: 1;
      min-height: 25px;
      height: 1.94vw;
      padding-left: 0.5vw;
      display: flex;
      align-items: center;

      &::placeholder {
        // position: absolute;
        // top: 50%;
        // transform: translateY(-50%);
        font-size: $title-font-size7;
      }
    }

    .spIn {
      height: 1.94vw;
      padding: 0 0.6vw;
      margin-left: 0.3vw;
      border: $firm-color solid 0.1vw;
      line-height: 1.94vw;
      color: $firm-color;
      border-radius: 0 0.5vw 0.5vw 0;
    }
  }

  .input {
    margin-top: 1.5vw;
    position: relative;
    display: flex;
    align-items: center;
    border-radius: 0.5vw;

    input {
      width: 100%;
      flex: 1;
      border: none;
      min-height: 25px;
      height: 1.94vw;
      padding-left: 0.5vw;
      display: flex;
      align-items: center;
      position: relative;
      border-radius: 0.5vw;

      &::placeholder {
        // position: absolute;
        // top: 50%;
        // transform: translateY(-50%);
        font-size: $title-font-size7;
      }
    }

    span {
      position: absolute;
      right: 0;
      font-size: $title-font-size7;
    }
  }

  button {
    width: 100%;
    height: 2vw;
    min-height: 25px;
    border-radius: 0.4vw;
    border: $firm-color 0.1vw solid;
    margin-top: 1.5vw;
    font-size: $title-font-size8;
  }
}
</style>
